<template>
  <div>
    <!-- <chart height="100%" width="100%" /> -->
    <el-row type="flex" justify="space-around">
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <div class="title-container">
            <span>最近满意评价记录</span>
          </div>
          <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list.satisfiedList"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="时间" prop="id" align="center" width="80">
              <template slot-scope="{row}">
                <span>{{ row.evaluateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="用户名" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.userName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工号" prop="id" align="center">
              <template slot-scope="{row}">
                <span>{{ row.jobNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="机构名称" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.orgName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="大厅名称" prop="name" align="center">
              <template slot-scope="{row}">
                <span>{{ row.hallName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="窗口名称" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.windowName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="结果" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.result }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结果描述" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.resultDesc }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <div class="title-container">
            <span>最近不满意评价记录</span>
          </div>
          <el-table
            :key="tableKey"
            v-loading="listLoading"
            :data="list.dissatisfiedList"
            border
            fit
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column label="时间" prop="id" align="center" width="80">
              <template slot-scope="{row}">
                <span>{{ row.evaluateTime }}</span>
              </template>
            </el-table-column>
            <el-table-column label="用户名" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.userName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="工号" prop="id" align="center">
              <template slot-scope="{row}">
                <span>{{ row.jobNumber }}</span>
              </template>
            </el-table-column>
            <el-table-column label="机构名称" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.orgName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="大厅名称" prop="name" align="center">
              <template slot-scope="{row}">
                <span>{{ row.hallName }}</span>
              </template>
            </el-table-column>
            <el-table-column label="窗口名称" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.windowName }}</span>
              </template>
            </el-table-column>

            <el-table-column label="结果" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.result }}</span>
              </template>
            </el-table-column>
            <el-table-column label="结果描述" prop="assess" align="center">
              <template slot-scope="{row}">
                <span>{{ row.resultDesc }}</span>
              </template>
            </el-table-column>

          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <div class="title-container">
            <span>满意量走势图</span>
          </div>
          <div class="chart-container">
            <chart v-if="list.dataList1.length>0" id="chart1" height="300px" width="100%" :set-option-list="list.dataList1" />
          </div>
        </div>
      </el-col>
      <el-col :span="11">
        <div class="grid-content bg-purple">
          <div class="title-container">
            <span>满意度扇形统计图</span>
          </div>
          <div class="chart-container">
            <Pie v-if="list.dataList2.length>0" id="chart12" height="300px" width="100%" :set-option-list="list.dataList2" />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import Chart from '@/components/Charts/MixChart'
import Chart from '@/components/Charts/BarChart'
import Pie from '@/components/Charts/PieChart'
import { homePageStatistics } from '@/api/public'
export default {
  // name: 'MixChart',
  components: { Chart, Pie },
  data() {
    return {
      listLoading: false,
      tableKey: 0,
      list: {
        dataList1: [],
        dataList2: [],
        dissatisfiedList: [],
        satisfiedList: []
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      homePageStatistics().then(res => {
        const { data } = res
        for (const o in data) {
          if (!data[o]) {
            data[o] = []
          }
        }
        this.list = data
      })
    }
  }
}
</script>

<style scoped>
.chart-container{
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}
.grid-content{
  max-height: 300px;
}
.title-container{
  padding:8px;
  width:100%;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>

